<template>
	<view>
		<view v-if="type == 'border'" class="header" :style="'background-image:'+'url('+info.back_img+')'">
			<view class="info-header">
				<view><image class="avatar" :src="info.head_img" mode="aspectFill"></image></view>
				<view class="pt12"><uni-title type="h1" color="#FFF" :title="info.name"></uni-title></view>
			</view>
			<view class="info-brief line-clamp2 mt15">{{info.company_name}} {{info.post}}</view>
			<view class="info-brief">关注：{{info.follows_count}} 粉丝：{{info.fans_count}}</view>
		</view>
		<view v-if="type != 'border'" class="header" :style="'background-image:'+'url('+info.back_img+')'">
			<view class="info-header">
				<view><image class="avatar" :src="info.head_img" mode="aspectFill"></image></view>
				<view>
					<view class="info-name">{{info.name}}</view>
					<view class="info-user-brief line-clamp1">
						<text>{{info.info.company_name}}</text>
						<text>{{info.info.post}}</text>
					</view>
				</view>
			</view>
			<view class="info-brief line-clamp2 mt15">{{info.meta_description}}</view>
			<view class="info-brief mt15">
				<uni-row class="p8">
					<uni-col :span="12">
						关注：{{info.follows_count}} 粉丝：{{info.fans_count}}
					</uni-col>
					<uni-col v-if="!type" :span="12" class="text-right">
						<view class="text-right" v-if="id == 0"><uni-tag  type="warning" @click="onLink('/user/edit/edit')" text="编辑" /></view>
						<view class="text-right" v-if="id > 0">
							<uni-fav :checked="inverted" class="favBtn" :circle="true" bg-color="#FFD101" bg-color-checked="#FFD101" fg-color="#666" fg-color-checked="#666" @click="onFollow" :content-text="contentText" />
						</view>
					</uni-col>
				</uni-row>
			</view>
		</view>
		<view class="text-center tabs-select">
			<uni-row :gutter="90">
				<uni-col :span="12" v-for="(item,index) in items" :key="index">
					<view :class="current == index ? 'tab-text-select' : 'tab-text'" @click="onClickItem(index)">
						<view>{{item}}</view>
					</view>
				</uni-col>
			</uni-row>
		</view>
		
		<view class="info-content">
			<uni-row v-if="current == 0">
				<view class="p8" v-html="info.info.info"></view>
				<view v-if="info.image">
					<uni-grid :column="2" :show-border="false" :square="false" :highlight="true" @change="change">
						<uni-grid-item v-for="(item, index) in info.image" :index="index" :key="index">
							<view class="p4" style="background-color: #fff;">
								<image style="width: 100%;height: 300rpx;" mode="aspectFill" :src="item"></image>
							</view>
						</uni-grid-item>
					</uni-grid>
					<view class="mt30 text-center" v-if="type != 'border'"><view v-if="info.info.show_tell != -1">联系方式：{{info.tell}}</view></view>
				</view>
			</uni-row>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info:{
					name:'未登录',
					head_img:'https://xinzhu-1301398555.cos.ap-shanghai.myqcloud.com/wxapp/avatar.png',
					info:'',
					back_img:'https://1301398555.vod2.myqcloud.com/d83f9aeavodcq1301398555/c11d34dc5576678020859297881/LCcTro0KsmcA.jpg',
					fans:{},
					post:'',
					image:[]
					
				},
				id:0,
				type:'',
				inverted:false,
				current: 0,
				items:['介绍','动态'],
				contentText: {contentDefault: '关注',contentFav: '已关注'},
				
				shareinfo:{title:'',img:'',path:''}
			}
		},
		onLoad(options){
			this.id = options.id
			this.type = options.type
			
		},
		onShow() {
			if(this.type == 'border'){
				this.onGetIdBorder()
				return
			}
			if(this.id > 0){
				this.onGetIdUser()
				return
			}
			this.onGetUser()
		},
		// api2/set_user_info 保存个人信息
		methods: {
			onGetUser(){
				let _this = this
				this.$request_api('applet_api/user','POST',{}).then(res => {
					res.data.image = JSON.parse(res.data.info.image)
					_this.info = res.data
					_this.info.back_img = _this.info.back_img ? _this.info.back_img : 'https://1301398555.vod2.myqcloud.com/d83f9aeavodcq1301398555/c11d34dc5576678020859297881/LCcTro0KsmcA.jpg'
					
					_this.shareinfo.title = _this.info.name
					_this.shareinfo.img = _this.info.head_img
				}).catch(err => {
					console.log(err)
				})
			},
			onGetIdUser(){
				let _this = this
				this.$request_api('applet_api/user/'+this.id,'GET').then(res => {
					res.data.image = JSON.parse(res.data.info.image)
					_this.info = res.data
					_this.inverted = res.data.inverted
					_this.info.back_img = _this.info.back_img ? _this.info.back_img : 'https://1301398555.vod2.myqcloud.com/d83f9aeavodcq1301398555/c11d34dc5576678020859297881/LCcTro0KsmcA.jpg'
					
					_this.shareinfo.title = _this.info.name
					_this.shareinfo.img = _this.info.head_img
				}).catch(err => {
					console.log(err)
				})
			},
			onGetIdBorder(){
				let _this = this
				this.$request_api('applet_api/border/'+this.id,'GET').then(res => {
					_this.info.image = JSON.parse(res.data.showcase)
					_this.info.content = res.data.content
					_this.info.company_name = res.data.synopsis
					_this.info.head_img = res.data.img
					_this.info.fans_count = res.data.fans_count
					_this.info.follows_count = res.data.follows_count
					_this.info.name = res.data.name
					
					_this.shareinfo.title = _this.info.name
					_this.shareinfo.img = _this.info.head_img
					
				}).catch(err => {
					console.log(err)
				})
			},
			onFollow(){
				let _this = this
				this.$request_api('applet_api/user/concern','PATCH',{id:_this.info.id}).then(res => {
					_this.inverted = !_this.inverted
					this.onGetIdUser()
				}).catch(err => {
					console.log(err)
				})
			},
			onLink(url){
				uni.navigateTo({
					url: url
				});
			},
			onClickItem(e){
				this.current = e
			},
			change(e){
				wx.previewImage({
					current: this.info.image[e.detail.index], // 当前显示图片的http链接
					urls: this.info.image
				})
			},
		}
	}
</script>

<style scoped lang="scss">
.header{height: 220px;padding: 30px 15px 0px 15px;color: #fff;background-repeat: no-repeat;background-size: cover;}
.info-header{display: grid;grid-template-columns: 100px auto;}
.avatar{width: 90px;border-radius: 90px;height: 90px; }
.info-brief{height: 80rpx;}
.info-user-brief text{font-size: .8rem;margin-right: 6px;}
.info-user-brief{height: 22px;}
.info-name{font-size: 1.2rem;font-weight: 600;line-height: 160%;margin-top: 20rpx;}
.favBtn{position: absolute;right: 0px;}

.tabs-select{width: 50%;margin:0px auto}
.info-content{border-top: 1px solid #F5F5F5;padding: 30px 15px 60px 15px;margin-top: 10px;}
.tab-text{color: #666;border-bottom: 2px solid #FFF;padding: 12px 0px;}
.tab-text-select{color: #000;border-bottom: 2px solid #FFD101;padding: 12px 0px;font-weight: 500;}
</style>
